<template>
  <view class="page">
    <view class="top">
      <view class="top-1 flex">
        <view class="top-1-1 flex" @click="open">{{ info.start_date ? info.start_date + '至' + info.end_date :
          '筛选订单日期' }}<u-icon name="arrow-down" color="#333333" size="14"></u-icon></view>
        <view class="top-1-2" @click="handleNav('/pagesB/my/wallet/invoiceHistory')">开票历史</view>
      </view>
    </view>
    <view class="kong" style="height: 100rpx;"></view>
    <view class="box flex" v-for="(caritem, carindex) in list" :key="carindex" @click="checkTap(carindex)">
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" v-if="!caritem.checked" />
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" v-else />
      <view class="box-right">
        <view class="box-right-1">{{ caritem.pay_date }}</view>
        <view class="box-right-1"><span>详情</span>{{ caritem.consumption_name }}</view>
        <view class="box-right-1"><span>类型</span>{{ caritem.types }} <view class="num">￥{{ caritem.pay_price }}</view>
        </view>
      </view>
    </view>
    <view class="kong" style="height: 164rpx;"></view>
    <view class="bottom flex" @click="select_all">
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-18.png" mode="" class="shop_img1"
        v-if="!allselect" />
      <image src="https://www.atuanjian.com/appletStatic/static/images/u-19.png" mode="" class="shop_img1" v-else />
      全选
      <view class="bottom-flex flex">
        <span>{{ checkList.length }}</span>
        笔订单，共<span>{{ totalPrice }}</span>元
      </view>
      <view class="bottom-btn" @click.stop="handleNext">下一步</view>
    </view>
    <l-calendar v-model="show" @change="change" :isRange="true" activeBgColor="#FFBB50"
      rangeBgColor="rgba(255,187,80,0.3)" :initStartDate="info.start_date" :initEndDate="info.end_date"></l-calendar>
  </view>
</template>
<script>
import { allConsumptionRecharge } from "@/utils/request.js";
export default {
  data() {
    return {
      show: false,
      list: [],
      info: {
        end_date: "",
        start_date: "",
        n: 10,
        p: 0
      },
      selectedDates: [], // 用于存储选中的日期范围
      checkList: [],
      totalPrice: "0.00",
      allselect: false,
      list: [],
    };
  },
  onShow() {
    this.getInit()
  },
  onReachBottom() {
    if (this.list.length < this.count) {
      this.info.p++
      this.getInit()
    }
  },
  methods: {
    async allConsumptionRecharge(data) {
      return await allConsumptionRecharge(data)
    },
    getInit() {
      this.allConsumptionRecharge(this.info).then(res => {
        if (res) {
          let list = [...res.list, ...this.list]
          list.forEach(item => {
            item.checked = false
          })
          this.list = list
          this.count = res.count
        }
      })
    },
    handleNext() {
      if (this.checkList.length == 0) {
        uni.showToast({
          title: '请选择开票订单',
          icon: 'none',
          mask: true
        })
        return;
      }
      let data = this.checkList.map(item => {
        return { order_number: item.order_number, tables: item.tables };
      });
      uni.navigateTo({
        url: './Invoicing?data='+JSON.stringify(data)+'&totalPrice='+this.totalPrice
      })
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false; // 关闭日历
    },
    change(event) {
      console.log(event);
      this.info.start_date = event.startDate;
      this.info.end_date = event.endDate;
      this.info.p = 0
      this.list = []
      this.getInit()
    },
    handleNav(url) {
      uni.navigateTo({ url: url });
    },
    select_all() {
      this.allselect = this.list.every((r) => r.checked);
      if (!this.allselect) {
        for (let i in this.list) {
          this.list[i].checked = true;
        }
        this.checkList = this.list;
      } else {
        for (let i in this.list) {
          this.list[i].checked = false;
        }
        this.checkList = [];
        this.$forceUpdate();
      }
      this.allselect = !this.allselect;
      this.calculateTotal();
    },
    checkTap(index) {
      this.list[index].checked = !this.list[index].checked;
      if (this.list[index].checked) {
        this.checkList.push(this.list[index]);
      } else {
        const itemToRemove = this.list[index];
        this.checkList = this.checkList.filter((item) => item !== itemToRemove);
      }
      this.$forceUpdate();
      this.calculateTotal();
      this.judgmentAll();
    },
    calculateTotal() {
      let total = 0;
      for (let i in this.list) {
        if (this.list[i].checked) {
          total += Number(this.list[i].pay_price)
        }
      }
      this.totalPrice = total.toFixed(2);
    },
    judgmentAll() {
      this.allselect = this.list.every((r) => r.checked);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep button {
  background-color: #FFBB50 !important;
  border-radius: 162rpx;
  font-size: 26rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.bottom {
  width: 100%;
  height: 104rpx;
  background: #ffffff;
  font-size: 24rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  align-items: center;
  z-index: 9;

  image {
    width: 32rpx;
    height: 32rpx;
    margin: 0 8rpx 0 27rpx;
  }

  .bottom-flex {
    flex: 1;
    margin: 0 16rpx;
    font-size: 24rpx;
    justify-content: flex-end;

    span {
      color: #ffbb50;
    }
  }

  .bottom-btn {
    width: 176rpx;
    height: 68rpx;
    line-height: 68rpx;
    text-align: center;
    font-size: 25rpx;
    background: #ffbb50;
    border-radius: 68rpx;
    margin-right: 27rpx;
    color: #ffffff;
  }
}

.top {
  width: 100%;
  padding: 26rpx 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;

  .top-1 {
    width: 694rpx;
    margin: 0 auto;
    justify-content: space-between;

    .top-1-1 {
      font-size: 25rpx;
    }
  }
}

.box {
  width: 658rpx;
  margin: 16rpx auto 0;
  border-radius: 12rpx;
  background: #ffffff;
  padding: 16rpx 18rpx;

  image {
    width: 32rpx;
    height: 32rpx;
  }

  .box-right {
    flex: 1;
    margin-left: 18rpx;

    .box-right-1 {
      padding: 12rpx 0;
      font-size: 25rpx;
      color: #333333;
      position: relative;

      span {
        color: #7f7f7f;
      }

      .num {
        position: absolute;
        top: 10rpx;
        right: 0;
        font-size: 26rpx;
      }
    }
  }
}
</style>